import classNames from 'classnames';
import { DetailedHTMLProps, LabelHTMLAttributes } from 'react';

interface CategoryProps extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
  subTitle?: string;
}

export const Category = memo((props: CategoryProps) => {
  return (
    <label {...props} className={classNames('text-14--bold inline-block text-gray-700 flex items-center', props.className)}>
      <span className="i-solar:wireless-charge-broken inline-block w-16 mr-4 text-blue-500"></span>
      {props.children}
      {props.subTitle && <span className="text-gray-400 text-12 ml-8">{props.subTitle}</span>}
    </label>
  );
});
